<template>
    <div class="Show">
        <Left :state="state"></Left>
        <div class="middle">
            <Top @Down="Down"></Top>
            <p class="title1">显示</p>
            <p class="title2">一段关于显示的描述</p>
            <div class="content1">
                <div  @click="standNode(index)"
                      v-for="(item,index) in newNodeData"
                      :key="item.ip"
                      :class="[isActive===index?'content1-box2':'content1-box']"
                >node{{index}}</div>
            </div>
            <div class="content2">
                <div class="content2-top">
                    <p class="title3">已选1项</p>
                    <button class="start" @click="startnode">启动</button>
                    <button class="stop" @click="stopnode">停止</button>
                </div>
                <div class="tableHead">
                    <div>
<!--                        <input type="checkbox"  class="check"  @click="checkAll"/>-->
                        <span>名称</span>
                    </div>
                    <span>状态</span>
                    <span>分类</span>
                    <span>操作</span>
                </div>
                <div class="information"
                     v-for="(item) in dataList"
                     :key="item.id">
                    <div @click="changeUrl()">
                        <input type="checkbox" :value="item.exe_name" v-model="check" name="items"  class="check"/>
                        <span>{{item.exe_name}}</span>
                    </div>
                    <div>
                        <div :class="[item.status===true ? 'state-ico':'state-ico2']"></div>
                        <span>{{item.status}}</span>
                    </div>
                    <div>
                        <img src="../../assets/image/showImg/classico.png" alt="" class="classico">
                        <span>{{item.type}}</span>
                    </div>
                    <div>
                        <img src="../../assets/image/showImg/operate1.png" alt="" class="operate-ico">
                        <span>操作</span>
                    </div>
                </div>
            </div>
            <div class="page">
                <div class="page-box1"><img src="../../assets/image/showImg/left.png" alt="" @click="upleft"></div>
                <div class="page-box1"
                     v-for="(item,index) in length "
                     :key="item"
                     @click="fun(index+1)"
                >{{item}}</div>
                <div class="page-box1"><img src="../../assets/image/showImg/right.png" alt="" @click="upright"></div>
                <div class="page-box2">5条/页</div>
                <span>跳至</span>
                <input v-model="page" class="page-box3"   @keydown="enterToLogin"/>
                <span>页</span>
            </div>
            <Bottom></Bottom>
        </div>
    </div>
</template>

<script>
    import Top from '../top/top'
    import Left from '../left/left'
    import Bottom from '../bottom/bottom'
    import axios from 'axios'

    export default {
        name: "show",
        components:{
            Top,
            Left,
            Bottom
        },
        data(){
            return{
                check:[],
                newNodeData:[],
                dataList:[],
                ip:"",
                port:"",
                isActive : '',
                flag: false,
                fileName: [],
                state:0,
                page:'1' ,
                length:['1'],
                maxpage:'',
                status:'',
                num:0
            }
        },
        methods:{
            Down(){
                axios({
                    url:'http://192.168.3.21:8888/user/report/',
                    method:'get',
                }).then(res =>{
                    console.log(res);
                    let a = document.createElement('a');
                    a.href = res.config.url;
                    // a.target = '_blank';//在新窗口打开
                    a.click();
                })
            },

            checkAll(){
                var items = document.getElementsByName("items")
                if(this.num ===0){
                    for(var i=0; i<items.length ; i++){
                        items[i].checked = true
                    }
                    this.num = 1
                }
                else {
                    for(var t=0; t<items.length ; t++){
                        items[t].checked = false
                    }
                    this.num = 0
                }
            },

            // 获取展示内容
            getShouw(){
                axios({
                    params: {
                        ip: this.ip,
                        port: this.port,
                        page: this.page
                    },
                    changeOrigin: true,
                    url: "http://192.168.3.21:8888/bmp/check_exe_isrun/",
                    method: "get",
                    headers:{ "Content-Type": "application/json"},
                }).then((res) => {
                    console.log(res)
                    this.maxpage=res.data.nums_page
                    if(this.length!==''){
                        this.length.length=0
                    }
                    for(var i=0;i<res.data.nums_page;i++){
                        this.length.push(i+1)
                    }
                    if(this.dataList!==""){this.dataList.length=0}
                    for(let i=0; i<res.data.value.length; i++){
                        this.dataList.push({});
                        this.dataList[i].type = res.data.value[i].type;
                        this.dataList[i].exe_name = res.data.value[i].exe_name;
                        this.dataList[i].status = res.data.value[i].status
                    }
                });
            },

            stopnode(){
                console.log(this.check);
                var ip3 =localStorage.getItem('ip2');
                var port3 = localStorage.getItem('port2');
                var data ={
                    ip: ip3,
                    port: port3,
                    filename : this.check
                };
                console.log(data);
                axios({
                    method:'post',
                    url:'http://192.168.3.21:8888/bmp/stop_exe/',
                    data :data
                }).then(res=>{
                    console.log(res)
                    // this.$router.go(0)
                    this.getShouw()
                })

            },

            startnode(){
                console.log(this.check);
                var ip3 =localStorage.getItem('ip2');
                var port3 = localStorage.getItem('port2');
                var data ={
                    ip: ip3,
                    port: port3,
                    filename : this.check
                };
                console.log(data);
                axios({
                    method:'post',
                    url:'http://192.168.3.21:8888/bmp/start_exe/',
                    data :data
                }).then(res=>{
                    console.log(res)
                    // this.$router.go(0)
                    this.getShouw()
                })

            },
            //点击展示
            standNode(i){
                this.isActive=i

                this.ip = this.newNodeData[i].ip;
                this.port = this.newNodeData[i].port;

                const ip2 = this.ip;
                localStorage.setItem('ip2', ip2);

                const port2 = this.port;
                localStorage.setItem('port2',port2);


               // 获取展示内容
                this.getShouw()
            },
            changeUrl(){
                this.flag=!this.flag;
            },

            fun(val){
                this.page = val
              this.getShouw()
            },
            upleft(){
                if(this.page ===1){
                    console.log("左边没有了");
                    return;
                }else{
                    this.page-=1
                    this.getShouw()
                }
            },
            upright(){
                if(this.page === this.maxpage){
                    console.log("右边没有了");
                    return;
                }else{
                    this.page+=1
                    this.getShouw()
                }
            },
            enterToLogin () {
                this.getShouw()
            },

        },
        mounted() {



            //获取node
            axios({
                method :"get",
                url : 'http://192.168.3.21:8888/node_bmp/node_show/',
                responseType:'stream'
            }).then(response =>{
                console.log(response);
                console.log(response.data);
                for(let i=0; i<response.data.data.length ; i++){
                    this.newNodeData.push({});
                    this.newNodeData[i].ip = response.data.data[i].ip;
                    this.newNodeData[i].port = response.data.data[i].port;
                }
                // this.ip = this.newNodeData[0].ip;
                // this.port = this.newNodeData[0].port;

                console.log(this.newNodeData)
                // console.log(response.data);
                // newNodeData = response.data;
            })

            this.getShouw()
        }
    }
</script>

<style lang="less">
    .Show{
        position: absolute;
        width: 1920px;
        height:100%;
        background: #F5F7F9;
        opacity: 1;
        display: flex;
        .middle{
            margin-left: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 1600px;
            .title1{
                margin-top: 51px;
                align-self: flex-start;
                font-size: 28px;
                font-family: PingFang SC;
                font-weight: 800;
                color: #000000;
                opacity: 1;
            }
            .title2{
                align-self: flex-start;
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #000000;
                opacity: 1;
            }
            .content1{
                margin-top: 24px;
                width: 100%;
                height: 210px;
                background: #FFFFFF;
                box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
                opacity: 1;
                border-radius: 10px;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                .content1-box{
                    width: 78px;
                    height: 42px;
                    background: #8cc5ff;
                    border-radius: 10px;
                    font-size: 16px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #0E8BF8;
                    text-align: center;
                    line-height: 42px;
                    margin-left: 28px;
                    cursor: pointer;
                }
                .content1-box2{
                    width: 78px;
                    height: 42px;
                    background: #2C6EF2;
                    border-radius: 10px;
                    font-size: 16px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #ffffff;
                    text-align: center;
                    line-height: 42px;
                    margin-left: 28px;
                    cursor: pointer;
                }
            }
            .content2{
                margin-top: 24px;
                width: 100%;
                height: 870px;
                background: #FFFFFF;
                box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
                opacity: 1;
                border-radius: 10px;
                margin-bottom: 16px;
                display: flex;
                flex-direction: column;
                align-items: center;
                .content2-top{
                    display: flex;
                    .title3{
                        font-size: 16px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        line-height: 59px;
                        color: #000000;
                        opacity: 1;
                    }
                    .start{
                        margin-top: 12px;
                        margin-left: 1298px;
                        width: 78px;
                        height: 42px;
                        background: #17F166;
                        border-radius: 10px;
                        font-size: 16px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #ffffff;
                        border: none;
                        outline: none;
                    }
                    .stop{
                        margin-top: 12px;
                        margin-left: 12px;
                        width: 78px;
                        height: 42px;
                        background: #FA2525;
                        border-radius: 10px;
                        font-size: 16px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #ffffff;
                        border: none;
                        outline: none;
                    }
                }
                .tableHead{
                    margin-top: 12px;
                    width: 1524px;
                    height: 50px;
                    background: #F5F7F9;
                    opacity: 1;
                    border-radius: 10px;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    div{
                        width: 300px;
                        display: flex;
                        align-items: center;
                    }
                    span{
                        width: 300px;
                        font-size: 16px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #000000;
                        opacity: 1;
                    }
                    .check{
                        width: 20px;
                        height: 20px;
                        margin-right: 5px;
                    }
                    .ico{
                        margin-right: 10px;
                        width: 20px;
                        height: 20px;
                    }
                }
                .information{
                    margin-top: 10px;
                    width: 1524px;
                    height: 50px;
                    background: #8cc5ff;
                    border-radius: 10px;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    span{
                        margin-left: 5px;
                        font-size: 16px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #000000;
                        opacity: 1;
                    }
                    div{
                        width: 300px;
                        display: flex;
                        align-items: center;
                        .check{
                            width: 20px;
                            height: 20px;
                        }
                    }
                    .name-ico{
                        width: 20px;
                        height: 20px;
                    }
                    .state-ico2{
                        width: 8px;
                        height: 8px;
                        background: #FB2525;
                        border-radius: 50%;
                        opacity: 1;
                    }
                    .state-ico{
                        width: 8px;
                        height: 8px;
                        background: green;
                        border-radius: 50%;
                        opacity: 1;
                    }
                    .classico{
                        width: 22px;
                        height: 22px;
                    }
                    .operate-ico{
                        margin-right: 10px;
                        width: 10px;
                        height: 10px;
                    }

                }
            }
            .page{
                width: 390px;
                display: flex;
                align-self: flex-end;
                justify-content: space-around;
                align-items: center;
                /*margin-bottom: 94px;*/
                input{
                    outline: none;
                    border: none;
                    text-indent: 20px;
                }
                .page-box1{
                    width: 32px;
                    height: 32px;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
                    opacity: 1;
                    border-radius: 5px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .page-box2{
                    width: 82px;
                    height: 32px;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
                    opacity: 1;
                    border-radius: 5px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #000000;
                    opacity: 1;
                }
                .page-box3{
                    width: 48px;
                    height: 32px;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
                    opacity: 1;
                    border-radius: 5px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #000000;
                    opacity: 1;
                }
                span{
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #000000;
                    opacity: 1;
                }
            }
        }
    }
</style>
